<div data-bb-type="screen" data-bb-effect="slide-left">
		<div data-bb-type="round-panel"> 
			<div data-bb-type="panel-header">Grade Scale</div>
				<div data-bb-type="label">Click on the arrow button to edit the value.</div>
				<div data-bb-type="scroll-panel" style="height:300px;" id="myPanel">
				<div id="list" data-bb-type="image-list" data-bb-images="none" data-bb-style="arrowbuttons" data-bb-header-justify="left">
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="A+ (4.33)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="A (4.00)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="A- (3.67)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="AB (3.50)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="B+ (3.33)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="B (3.00)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="B- (2.67)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="BC (2.50)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="C+ (2.33)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="C (2.00)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="C- (1.67)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="CD (1.50)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="D+ (1.33)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="D (1.00)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="D- (0.67)"></div>
					<div data-bb-type="item" onbtnclick="document.getElementById('editScale').show();" data-bb-title="F (0.00)"></div>
				</div>
			</div>
		</div>
		
		<div data-bb-type="round-panel" id="editScale" style="display:none">
				<div data-bb-type="label">Insert the new grade scale :</div>       
				<input type="text" value="" /> 
			   <div data-bb-type="button" data-bb-style="stretch" onclick="document.getElementById('editScale').hide();">Save!</div>
		</div>
		
		<div data-bb-type="round-panel"> 
			<div data-bb-type="panel-header">Term Format</div>
			   	<div data-bb-type="label">Choose Term Format: </div>
			   	<select data-bb-label="Term">
					<option value="arial" selected="true">Numeric</option>
					<option value="andalemono">Seasonal</option>
			   	</select>
		</div>

	<div data-bb-type="round-panel"> 
		<div data-bb-type="panel-header">Password Preference</div>
				<select data-bb-label="Password">
					<option value="document.getElementById('editPass').show();">On</option>
					<option value="document.getElementById('editPass').hide();" selected="true">Off</option>
			   	</select>
	</div>
	
		<div data-bb-type="round-panel" id="editPass" >
				<div data-bb-type="label">Insert your new password :</div>       
				<input type="password" value="" /> 
				<div data-bb-type="label">Re-type your new password :</div>       
				<input type="password" value="" />
		</div>
		
		
	<div data-bb-type="action-bar" data-bb-back-caption="Back"></div>
</div>
	
	
	